<template>
	<div class="wrap">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="换房申请处理" name="first">
				<el-table
					:data="tableData"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName"
					:highlight-current-row="true"
					:height="600">
					<el-table-column prop="changeId" label="申请编号" width="100" />
					<el-table-column prop="stuId" label="申请人学号" width="100" />
					<el-table-column prop="stuName" label="申请人姓名" />
					<el-table-column prop="college" label="学院" />
					<el-table-column prop="buildId" label="楼栋" />
					<el-table-column prop="professional" label="专业" />
					<el-table-column prop="oldRoom" label="现住房间" />
					<el-table-column prop="newRoom" label="新房间" />
					<el-table-column prop="newBed" label="目标床位" />
					<el-table-column prop="reason" label="申请原因" />
					<el-table-column prop="phone" label="联系方式" />
					<el-table-column prop="createTime" label="申请时间">
						<template #default="{ row }">
							{{ new Date(row.createTime).toLocaleDateString() }}
						</template>
					</el-table-column>
					<el-table-column prop="status" label="审核状态">
						<template #default="{ row }">
							<span :style="handleStatuColor(row)">{{ row.status }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" fixed="right">
						<template #default="{ row }">
							<el-button link type="success" @click="handleAgree(row)">同意</el-button>
							<el-button link type="danger" @click="handleClickRefuse(row)">拒绝</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-dialog width="500" v-model="showChangeDialog" title="同意换房申请">
					<div class="text">
						确定批准 <span class="color">{{ target.stuName }}</span> 的换房申请吗？
					</div>
					<template #footer>
						<el-button plain type="primary" @click="handleAgreeAgain">确认</el-button>
					</template>
				</el-dialog>

				<!-- 拒绝 -->
				<el-dialog width="500" v-model="showRefuseDialog" title="拒绝换房申请">
					<div class="text" style="color: lightsalmon">
						确定驳回 <span style="color: red">{{ target.stuName }}</span> 的换房申请吗？
					</div>
					<template #footer>
						<el-button plain type="primary" @click="handleRefuse">确认</el-button>
					</template>
				</el-dialog>

				<!-- 分页 -->
				<el-row class="pagination">
					<el-pagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						:page-sizes="pageSizes"
						small="small"
						:background="true"
						layout="total, sizes, prev, pager, next"
						:total="upAllowTotal"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="换房申请记录" name="second">
				
				<el-table
					:data="changeRoomHistory"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName"
					:highlight-current-row="true"
					:height="600">
					<el-table-column prop="changeId" label="申请编号" width="100" />
					<el-table-column prop="stuId" label="申请人学号" width="100" />
					<el-table-column prop="stuName" label="申请人姓名" />
					<el-table-column prop="college" label="学院" />
					<el-table-column prop="buildId" label="楼栋" />
					<el-table-column prop="professional" label="专业" />
					<el-table-column prop="oldRoom" label="原房间" />
					<el-table-column prop="newRoom" label="现住房间" />
					<el-table-column prop="newBed" label="目标床位" />
					<el-table-column prop="reason" label="申请原因" />
					<el-table-column prop="phone" label="联系方式" />
					<el-table-column prop="createTime" label="申请时间">
						<template #default="{ row }">
							{{ new Date(row.createTime).toLocaleDateString() }}
						</template>
					</el-table-column>
					<el-table-column prop="status" label="审核状态">
						<template #default="{ row }">
							<span :style="handleStatuColor(row)">{{ row.status }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" fixed="right">
						<template #default="{ row }">
							<el-button link type="danger" v-if="row.status != '未审核'" @click="handleDel(row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<DeleteDialog v-model="deleDialog">
					<template #containt> {{ target.stuName }} 的换房申请 </template>
					<template #btn>
						<el-button @click="handleDeleChangeApply" link type="primary">确认</el-button>
						<el-button @click="deleDialog = false" link type="danger">取消</el-button>
					</template>
				</DeleteDialog>

				<!-- 分页 -->
				<el-row class="pagination">
					<el-pagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						:page-sizes="pageSizes"
						small="small"
						:background="true"
						layout="total, sizes, prev, pager, next"
						:total="historyTotal"
						@size-change="handleSizeChange2"
						@current-change="handleCurrentChange2" />
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { queryExchangeInfoNo, getExchangeInfoAll } from '@/utils/axios/master'
import { getExchangeAll } from '@/utils/axios/getTotal'
import { downExchangeInfo, deleteExcahngeInfoByHou, agreeExchangeInfo } from '@/utils/axios/domiRequests'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'
import { debounce } from '@/utils/tools'


const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30])

const tableData = ref([])
const changeRoomHistory = ref([])

const deleDialog = ref(false)
const showChangeDialog = ref(false)
const showRefuseDialog = ref(false)
const target = ref()



const activeName = ref('first')

// 换房申请记录总数
const historyTotal = ref(0)
// 未审核的总数
const upAllowTotal = ref(0)

const handleSizeChange2 = async (val) => {
	let { data } = await getExchangeInfoAll({ currentPage: currentPage.value, pageSize: val })
	changeRoomHistory.value = data
}
const handleCurrentChange2 = async (val) => {
	let { data } = await getExchangeInfoAll({ currentPage: val, pageSize: pageSize.value })
	changeRoomHistory.value = data
}
const handleSizeChange = async (val) => {
	let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, status: '未审核', pageSize: val })

	tableData.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await queryExchangeInfoNo({ currentPage: val, status: '未审核' })

	tableData.value = data
}

// tab切换
const handleClick = debounce(async (tab) => {
	const name = tab.props.name
	if (name == 'first') {
		let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, status: '未审核' })
		tableData.value = data
	}
	if (name == 'second') {
		let { data } = await getExchangeInfoAll({ currentPage: currentPage.value, pageSize: pageSize.value })
		let res = await getExchangeAll()
		historyTotal.value = res.data

		changeRoomHistory.value = data
	}
})

// 处理删除申请
const handleDeleChangeApply = async () => {
	await deleteExcahngeInfoByHou(target.value)
	let { data } = await getExchangeInfoAll({ currentPage: currentPage.value, pageSize: pageSize.value })
	changeRoomHistory.value = data
	deleDialog.value = false
}

// 点击删除
const handleDel = (value) => {
	target.value = value
	deleDialog.value = true
}
// 点击拒绝
const handleClickRefuse = (value) => {
	target.value = value
	showRefuseDialog.value = true
}
// 处理拒绝申请
const handleRefuse = debounce(async () => {
	await downExchangeInfo(target.value)
	let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, status: '未审核' })
	tableData.value = data
	showRefuseDialog.value = false
})

// 提交同意换房申请
const handleAgreeAgain = async () => {
	await agreeExchangeInfo({ changeId: target.value.changeId })
	let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, status: '未审核' })
	tableData.value = data
	showChangeDialog.value = false
}

// 处理同意
const handleAgree = (row) => {
	target.value = row
	showChangeDialog.value = true
}

// 处理状态颜色
const handleStatuColor = (row) => {
	if (row.status == '未审核') return { color: '#eebe77' }
	else if (row.status == '通过') return { color: 'rgb(126,203,87)' }
	else if (row.status == '未通过') return { color: '#f56c6c' }
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

onMounted(async () => {
	let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, status: '未审核' })
	tableData.value = data
	upAllowTotal.value = data.length
})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
.color {
	color: #e6a23c;
}
.text {
	text-indent: 2rem;
}
</style>
